<template>
<div class="sidebar" :class="{'toggled' : toggled}">
	<div class="sidebar-inner">    
    <div class="profile-menu" @click="showUserInfo">
        <a href="javascript:void(0);">
            <slot name="headImg"></slot>
            <slot name="userName"></slot>
        </a>

        <ul class="main-menu" :class="{'show' : isShow}">
            <li v-for="st in settings">
                <a href="javascript:void(0);" v-waves><i class="glyphicon {{ st.icon }}"></i>{{ st.name }}</a>
            </li>
        </ul>
    </div>
    <ul class="main-menu">
        <!--<li v-for="menu in menus" :class="{'sub-menu' : menu.childMenus, 'active toggled': menu.childMenus && open}">
            <!--<a href="javascript:void(0);" v-if="menu.childMenus" @click="toggleSubmenu(menu)"><i class="glyphicon {{ menu.icon }}"></i>{{ menu.name }}</a>
            <a :href="menu.url" v-else><i class="glyphicon {{ menu.icon }}"></i>{{ menu.name }}</a>-->

            <a v-link="menu.url" @click="toggleSubmenu(menu)"><i class="glyphicon {{ menu.icon }}"></i>{{ menu.name }}</a>
            <ul v-if="menu.childMenus">
              <li v-for="sm in menu.childMenus" :class="{'sub-menu' : sm.childMenus, 'active toggled': sm.childMenus && open}">
                <!--<a href="javascript:void(0);" v-if="sm.childMenus" @click="toggleSubmenu(sm)">{{ sm.name }}</a>
                <a :href="sm.url" v-else>{{ sm.name }}</a>-->
                <a v-link="sm.url" @click="toggleSubmenu(sm)">{{ sm.name }}</a>
                <ul v-if="sm.childMenus">
                    <li v-for="tm in sm.childMenus"><a v-link="tm.url">{{ tm.name }}</a></li>
                </ul>
              </li>
            </ul>
        </li>-->
        <tree :menus="menus"></tree>
    </ul>
</div>
</div>
</template>

<script>
import Tree from './Tree'
export default {
  data () {
    return {
      open: false
    }
  },
  props: {
    toggled: {
      type: Boolean,
      default: false
    },
    isShow: {
      type: Boolean,
      default: false
    },
    settings: {
      type: Array
    },
    menus: {
      type: Array
    }
  },
  methods: {
    showUserInfo () {
      this.isShow = !this.isShow
    },
    toggleSubmenu (menu) {
      if (menu.childMenus) {
        this.open = !this.open
      }
    }
  },
  components: {
    Tree
  }
}
</script>

<style lang="less">
@import '../vendors/bootstrap/less/mixins';
@import '../less/sider-menu.less';

.show {
	display : block
}
</style>